<template>
  <div class="goods-show">
    <div
      v-for="(goodsinfo, index) in collectionsList"
      :key="index"
      class="show-box"
    >
    <input type="radio" class="check">
      <div class="left-img"><img :src="goodsinfo.img" /></div>
      <div class="right-info">
        <p>{{ goodsinfo.name }}</p>
        <router-link :to="`/Goods/GoodsDetail?id=${goodsinfo.id}`">
          <div>
            <p>
              ￥ <i>{{ goodsinfo.price }}</i> 
              
            </p>
          </div>
        </router-link>
      </div>
    </div>
    <b>- 猜你喜欢 -</b>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "collected",
  data() {
    return {
    goodsinfo:"",
      goods: "",
      collectionsList:""
    };
  },
  created() {
    axios({
      url: "/collections?user=哈哈",
    }).then((res) => {
      this.collectionsList = res.data;
    });
  },
};
</script>

<style scoped>
.goods-show {
  display: flex;
  flex-direction: column;
  margin-top: 0.5rem  ;
  
  justify-content: center;
  align-items: center;
  background-color: #f1f0f0;
}
.goods-show img {
  width: 0.8rem;
  height: 0.8rem;
  align-items: center;
  margin: 0.1rem;
}

.goods-show .show-box {
  width: 3.5rem;
  height: 1rem;
  background-color:white;
  display: flex;
  justify-content: center;
  border-radius: 0.1rem;
  margin-top: 0.1rem;
  align-items: center;
}

.goods-show .left-img {
  display: flex;
  justify-content: center;
}
.goods-show .right-info {
  width: 3rem;
  display: flex;
  justify-content: space-evenly;
  flex-direction: column;
}
.goods-show .right-info p {
  margin-bottom: .1rem;
 
}
.goods-show .right-info div p {
  font-size: 0.1rem;
}
.goods-show .right-info div i,a {
  font-size: 0.14rem;
   color: rgb(238, 56, 56);
}
.goods-show b{
  margin: .2rem 0;
}
.check{
margin-left: .1rem;
}
</style>


